<template>
    <div class="md-example-child md-example-child-scroll-view md-example-child-scroll-view-3">
        <md-scroll-view
            ref="scrollView"
            :scrolling-x="false"
            @end-reached="$_onEndReached"
            auto-reflow
        >
            <!--<div-->
            <!--    v-for="i in list"-->
            <!--    :key="i"-->
            <!--    class="scroll-view-list"-->
            <!--&gt;-->
            <!--    <p class="scroll-view-item">{{i}}</p>-->
            <!--</div>-->
            <slot>

            </slot>
            <md-scroll-view-more
                slot="more"
                :is-finished="isFinished"
                :loading-text="loadingText"
                :finished-text="finishedText"
            >
            </md-scroll-view-more>
        </md-scroll-view>
    </div>
</template>

<script>
    import {ScrollView, ScrollViewMore} from 'mand-mobile'
    export default {
        components: {
            [ScrollView.name]: ScrollView,
            [ScrollViewMore.name]: ScrollViewMore,
        },
        props: {
            loadingText: {
                type: String,
                default() {
                    return ''
                }
            },
            finishedText: {
                type: String,
                default() {
                    return ''
                }
            },
            // isFinished: {
            //     type: Boolean,
            //     default() {
            //         return false
            //     }
            // }
        },
        data() {
            return {
                list: 1000,
                isFinished: false,
                lock: false
            }
        },
        methods: {
            $_onEndReached() {
                console.log('dkdkdkdkdkd')
                if (this.lock) {
                    return
                }
                let that = this, end
                this.lock = true
                setTimeout(() => {
                    this.$emit('end',  end = () =>  {
                        console.log('被执行了')
                        this.lock = false
                        // that.$refs.scrollView.reflowScroller()
                    })
                    that.$refs.scrollView.finishLoadMore()
                }, 500)
            },
        }
    }
</script>

<style scoped lang="stylus">
  /*  .md-example-child-scroll-view-3 {
        height 100vh
        background #FFF

        .scroll-view-item {
            padding 30px 0
            text-align center
            font-size 32px
            border-bottom .5px solid #efefef
        }
    }*/

    .md-example-child-scroll-view-3 {
        height: 100vh;
        background: #FFF;

        .scroll-view-item {
            padding: 0.6rem 0;
            text-align: center;
            font-size: 0.64rem;
            border-bottom: 0.1rem solid #efefef
        }
    }

</style>
